<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>.::AsPerA::. Asignación de Permisos de Aprendices</title>
                <link rel="shortcut icon" href="favicon.ico"/>
            </f:facet>
        </h:head>
        <h:body>
            <div>
                <h:graphicImage url="/aspera/images/aspera.jpg" width="100%" height="100%" alt="LogoAspera"  style="vertical-align: top;"/> 
            </div>

            <p:panel>
                <p:panelGrid> 
                    <p:row>
                        <p:column style="vertical-align: top;">
                            <h:form>
                                <p:menu>
                                    <p:submenu label="Menú">                                
                                        <p:menuitem value="Inicio" url="/faces/aspera/indexCoordinador.xhtml" />
                                        <p:menuitem value="Coordinadores" url="/faces/aspera/GestionCoordinador.xhtml" />
                                        <p:menuitem value="Permisos" url="/faces/aspera/ApruebaPermisosCoord.xhtml" />
                                        <p:menuitem value="Instructores" url="/faces/aspera/gestionInstructores.xhtml" />
                                        <p:menuitem value="Asignar Fichas" url="/faces/aspera/asignarFichas.xhtml" />
                                        <p:menuitem value="Programas" url="/faces/aspera/gestionProgramas.xhtml" />
                                        <p:menuitem value="Fichas" url="/faces/aspera/gestionFichas.xhtml" />     
                                        <p:menuitem value="Aprendices" url="/faces/aspera/gestionAprendices.xhtml" />
                                        <p:menuitem value="Reportes" url="/faces/aspera/Reportes.xhtml" />
                                        <p:menuitem value="Cambio Contraseña" url="/faces/aspera/CambiaPasswordCoord.xhtml" />
                                        <p:menuitem value="Cerrar Sesión" actionListener="#{usuariosVista.cerrarSesion_action}" />
                                    </p:submenu>                 
                                </p:menu>
                            </h:form>
                        </p:column>
                        <p:column> 

                            <h:form id="formulario"> 
                                <p:panel id="panel" header="Asignar Fichas Instructor">
                                    <p:messages id="mensajes" showDetail="true" />                            
                                    <f:facet name="actions">
                                        <p:commandLink onclick="PF('helpDialog').show();" styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"><h:outputText styleClass="ui-icon ui-icon-help" /></p:commandLink>
                                    </f:facet>
                                    <p:panelGrid id="panelIns" columns="2">
                                        <h:outputText value="Identificación:"/>
                                        <p:inputText id="txtIdentificacion" binding="#{fichasVista.txtIdentificacion}" size="30">
                                            <p:ajax listener="#{fichasVista.txtIdentificacion_listener_fichas}" update="panel" />
                                            <p:tooltip for="txtIdentificacion" value="Digite El Documento del Instructor y Presione TAB" showEffect="slide" hideEffect="slide" />
                                        </p:inputText>         

                                        <h:outputText value="Nombre:"/>
                                        <p:inputText id="txtNombre" binding="#{fichasVista.txtNombre}" readonly="true" size="30"/>  

                                        <h:outputText value="Tipo:"/>                        
                                        <p:selectOneMenu id="cmbTipoInstructor" binding="#{fichasVista.cmbTipoInstructor}" disabled="true">
                                            <f:selectItem itemValue="ninguno" itemLabel="-SELECCIONE-" />
                                            <f:selectItem itemValue="PLANTA" itemLabel="PLANTA" />
                                            <f:selectItem itemValue="CONTRATISTA" itemLabel="CONTRATISTA" />
                                        </p:selectOneMenu>  
                                    </p:panelGrid>

                                    <p:dataTable id="listaFichasDisponibles" var="fichasD" value="#{fichasVista.listaFichasD}" selection="#{fichasVista.selectedFichas}"
                                                 rowKey="#{fichasD.ficha}" paginator="true" rows="5" emptyMessage="No Hay Fichas Disponibles para Asignar al Instructor!" 
                                                 filteredValue="#{fichasVista.listaFichasD}">
                                        <f:facet name="header">  
                                            Fichas Disponibles para Asignar
                                        </f:facet>

                                        <p:column selectionMode="multiple" style="width:4%" />

                                        <p:column sortBy="#{fichasD.ficha}" filterBy="#{fichasD.ficha}" filterMatchMode="contains">
                                            <f:facet name="header">
                                                <h:outputText  value="Ficha" />                            
                                            </f:facet>
                                            <h:outputText  value="#{fichasD.ficha}" />                          
                                        </p:column>

                                        <p:column sortBy="#{fichasD.jornada}">
                                            <f:facet name="header">
                                                <h:outputText  value="Jornada" />                            
                                            </f:facet>
                                            <h:outputText  value="#{fichasD.jornada}" />                          
                                        </p:column>

                                        <p:column sortBy="#{fichasD.codigoPrograma.codigo}" filterBy="#{fichasD.codigoPrograma.codigo}">
                                            <f:facet name="header" >
                                                <h:outputText  value="Código Programa" />                            
                                            </f:facet>
                                            <h:outputText  value="#{fichasD.codigoPrograma.codigo}" />                          
                                        </p:column>

                                        <p:column sortBy="#{fichasD.codigoPrograma.nombre}" filterBy="#{fichasD.codigoPrograma.nombre}" filterMatchMode="contains">
                                            <f:facet name="header" >
                                                <h:outputText  value="Nombre Programa" />                            
                                            </f:facet>
                                            <h:outputText  value="#{fichasD.codigoPrograma.nombre}" />                          
                                        </p:column>

                                        <f:facet name="footer"> 
                                            <div align="left"> 
                                                <p:commandButton id="btnAsignar" value="Asignar Fichas" binding="#{fichasVista.btnRegistrarFichas}" action="#{fichasVista.registrar_fichas_action}" update=":formulario:listaFichasDisponibles,:formulario:listaFichasAsignadas" />
                                            </div>
                                        </f:facet>                                
                                    </p:dataTable>                              
                                    <br/>
                                    <p:dataTable id="listaFichasAsignadas" var="fichasA" value="#{fichasVista.listaFichasA}" selection="#{fichasVista.selectedFichasA}"
                                                 rowKey="#{fichasA.ficha}" paginator="true" rows="5" emptyMessage="No Existen Fichas!" 
                                                 filteredValue="#{fichasVista.listaFichasA}">
                                        <f:facet name="header">  
                                            Fichas Asignadas al Instructor
                                        </f:facet>

                                        <p:column selectionMode="multiple" style="width:4%" />

                                        <p:column sortBy="#{fichasA.ficha}" filterBy="#{fichasA.ficha}" filterMatchMode="contains">
                                            <f:facet name="header">
                                                <h:outputText  value="Ficha" />                            
                                            </f:facet>
                                            <h:outputText  value="#{fichasA.ficha}" />                          
                                        </p:column>

                                        <p:column sortBy="#{fichasA.jornada}">
                                            <f:facet name="header">
                                                <h:outputText  value="Jornada" />                            
                                            </f:facet>
                                            <h:outputText  value="#{fichasA.jornada}" />                          
                                        </p:column>

                                        <p:column sortBy="#{fichasA.codigoPrograma.codigo}" filterBy="#{fichasA.codigoPrograma.codigo}">
                                            <f:facet name="header" >
                                                <h:outputText  value="Código Programa" />                            
                                            </f:facet>
                                            <h:outputText  value="#{fichasA.codigoPrograma.codigo}" />                          
                                        </p:column>

                                        <p:column sortBy="#{fichasA.codigoPrograma.nombre}" filterBy="#{fichasA.codigoPrograma.nombre}" filterMatchMode="contains">
                                            <f:facet name="header" >
                                                <h:outputText  value="Nombre Programa" />                            
                                            </f:facet>
                                            <h:outputText  value="#{fichasA.codigoPrograma.nombre}" />                          
                                        </p:column>

                                        <f:facet name="footer"> 
                                            <div align="left"> 
                                                <p:commandButton id="btnRetirar" value="Retirar Fichas" binding="#{fichasVista.btnRetirarFichas}" action="#{fichasVista.retirar_fichas_action}" update=":formulario:listaFichasDisponibles,:formulario:listaFichasAsignadas" />                            
                                            </div>
                                        </f:facet>
                                    </p:dataTable>                            
                                </p:panel>
                                <!-- dialogo de ayuda -->
                                <p:dialog id="modalDialog" header="Ayuda" widgetVar="helpDialog" showEffect="fade" hideEffect="bounce" modal="true" dynamic="true">  
                                    <p align="justify">                       
                                        En esta página usted podrá:<br/><br/>
                                        <b>-Asignar Fichas a Instructores:</b> ésta opción solo está disponible para usuarios de tipo Coordinador. 
                                        Para asignar una ficha a un instructor basta con digitar su documento de identificación y luego presionar la tecla TAB(Tabulación) o Enter. 
                                        ASPERA verificará que exista un instructor con ese documento. Si existe cargará sus datos y sino ASPERA informará que el instructor
                                        no se encuentra registrado en el sistema. Luego se mostrarán todas las fichas disponibles para asignarle a ese instructor y en una
                                        segunda tabla se mostrarán las fichas que ya tenga asignadas en el momento. Para asignar una o varias fichas, seleccionelas de la
                                        primera tabla y luego de clic en el botón Asignar.
                                        <br/><br/>
                                        <b>-Retirar Fichas a Instructores:</b> Para retirar una o varias fichas, seleccionelas de la segunda tabla y luego de clic en el 
                                        botón Retirar.                    
                                        <br/><br/>
                                        <b>-Consultar y Filtrar Fichas:</b> en ambas tablas de resultados se pueden visualizar todas las fichas disponibles y asignadas al
                                        instructor, respectivamente. Si desea filtrar los resultados basta con digitar en la columna Ficha un número especifico, de igual forma 
                                        se puede utilizar el filtro por Código de Programa o Nombre del Programa.                      
                                    </p>
                                </p:dialog>
                            </h:form>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:panel> 
            <div>
                <h:graphicImage url="/aspera/images/asperaPie.jpg" width="100%" height="100%" alt="LogoAspera"  style="vertical-align: bottom;"/>
            </div>
        </h:body>

    </f:view>
</html>
